<template>
    <div class="questionsBox">
        <div class="search">
            <el-input placeholder="请输入关键词" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchC">搜索</el-button>
            </el-input>
        </div>
        <div class="uploadResources">
            <el-button type="warning" size="mini" @click="goPutQuestions">提问</el-button>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="我的贴" name="meInvitation">
                <div class="questionList">
                    <div class="list" v-for="(item, index) in invitationList" :key="index">
                        <el-row>
                            <el-col :span="23">
                                <div class="menuList" @click="goAnswering(item)">
                                    <span>{{ item.content }}</span>
                                    <div class="listInfo">
                                        <label>作者:{{ item.username }}</label>
                                        <label>点击:{{ item.hitses }}</label>
                                        <label>发帖时间:{{ item.creationtime }}</label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <el-button type="danger" size="mini" @click="delQuestion(item)">删除</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="全部贴" name="allMeInvitation">
                <div class="questionList">
                    <div class="list" @click="goAnswering(item)" v-for="(item, index) in invitationList" :key="index">
                        <div class="menuList">
                            <span>{{ item.title }}</span>
                            <div class="listInfo">
                                <label>作者:{{ item.username }}</label>
                                <label>点击:{{ item.hitses }}</label>
                                <label>发帖时间:{{ item.creationtime }}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <div class="block">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>

        <div class="sortOrder">
            <el-dropdown placement="bottom" trigger="click" @command="handleCommand">
                <label>
                    {{ sorting }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </label>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">按点击量升序</el-dropdown-item>
                    <el-dropdown-item command="2">按点击量降序</el-dropdown-item>
                    <el-dropdown-item command="3">最新帖子在前</el-dropdown-item>
                    <el-dropdown-item command="4">最新贴子在后</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <div class="timeSelection">
            <label>发帖时间</label>
            <el-date-picker @change="dateTimeChange" v-model="dateTime" type="month" value-format="yyyy-MM" size="small"
                placeholder="选择日期"></el-date-picker>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {
            if (this.userInfo.id) {
                this.userId = this.userInfo.id;
            }
            this.handleGetInvitationList();
        },
        data() {
            return {
                search: "",
                activeName: "meInvitation",
                sorting: "排序方式",
                ascType: 2, // 排序方式
                dateTime: "", // 发帖时间
                total: 40, // 列表总数
                page: 1, // 当前页
                pageSize: 10, // 每页显示列表条数
                userId: null, //用户ID
                tabFlag: 0, // Tabs 切换标识
                invitationList: []
            };
        },

        methods: {
            delQuestion(val) {
                this.$confirm('确定删除所选的贴子吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store
                    .dispatch("invitationModule/answeringDel", {
                        ids: val.id
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.$message.success('删除成功')
                            this.handleGetInvitationList();
                        }
                    })
                }).catch(() => {
                    this.$message.info('已点击取消')
                });
            },
            dateTimeChange(val) {
                this.handleGetInvitationList()
            },
            // 搜索时根据关键字过滤
            searchC() {
                // if(this.search == ''){
                //     this.$message.warning('请输入关键词!')
                // }else{  
                //     this.handleGetInvitationList();
                // }
                this.handleGetInvitationList();
            },
            // 提问
            goPutQuestions() {
                this.$router.push({
                    path: "studentPutQuestions"
                });
            },

            // 帖子详情
            goAnswering(params) {
                this.$router.push({
                    path: "studentAnswering",
                    query: {
                        answering: params,
                        id: params.id
                    }
                });
            },

            // 分类切换
            handleClick(t, e) {
                if (t.index !== this.tabFlag) {
                    this.tabFlag = t.index;
                }
                // 因为当前未做正式登陆暂时登陆信息没有用
                if (t.name === "meInvitation") {
                    this.userId = this.userInfo.id;
                    this.handleGetInvitationList();
                } else {
                    this.userId = "";
                    this.handleGetInvitationList();
                }
            },

            // 切换每页显示条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.handleGetInvitationList();
            },

            // 当前页
            handleCurrentChange(val) {
                this.page = val;
                this.handleGetInvitationList();
            },

            // 选择排序方式
            handleCommand(command) {
                // 判断用户单击上分为同一个
                if (this.ascType !== command * 1) {
                    this.ascType = command * 1;
                    if (command * 1 === 1) {
                        this.sorting = "按点击量升序";
                    } else if (command * 1 === 2) {
                        this.sorting = "按点击量降序";
                    } else if (command * 1 === 3) {
                        this.sorting = "最新贴子在前";
                    } else {
                        this.sorting = "最新贴子在后";
                    }
                    this.handleGetInvitationList();
                }
            },

            // 获取帖子列表
            handleGetInvitationList() {
                const loading = this.$loading({
                    lock: true,
                    text: "加载中...",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.2)"
                });
                /**
                 * 获取帖子列表
                 * @param ascType：排序方式，1 点击量升序 ，2 点击量降序 ，3 最新帖子在前，4 最新贴子在后
                 * @param datetime：发帖时间(2020-03)
                 * @param page:当前页
                 * @param pageSize：每页显示条数
                 * @param userId: 用户ID ， 全部贴子则为空
                 */
                this.$store
                    .dispatch("invitationModule/getInvitationList", {
                        search: this.search,
                        ascType: this.ascType === 0 ? 1 : this.ascType,
                        datetime: this.dateTime,
                        page: this.page,
                        pageSize: this.pageSize,
                        userId: this.userId
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.invitationList = res.data.result.list;
                            this.total = res.data.result.total;
                        }
                        loading.close();
                    })
                    .catch(error => {
                        this.$message.error("服务器内部错误");
                        loading.close();
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .questionsBox {
        overflow: hidden;
        padding: 10px;
        position: relative;
        background-color: white;

        .sortOrder {
            position: absolute;
            top: 80px;
            left: 170px;

            label {
                color: #303133;
                cursor: pointer;
            }
        }

        .timeSelection {
            position: absolute;
            top: 65px;
            right: 20px;

            label {
                font-size: 14px;
                color: #303133;
                margin-right: 10px;
            }
        }

        .search {
            width: 290px;
            margin-bottom: 20px;
        }

        .uploadResources {
            position: absolute;
            right: 20px;
            top: 20px;
        }

        .questionList {
            overflow: hidden;
            background: #fff;
            padding: 10px;
            border-radius: 4px;

            .list {
                background: #fff;
                padding-left: 15px;
                padding-right: 15px;
                padding-top: 15px;
                cursor: pointer;
                // &:hover {
                //     background: #66ccff;
                //     color: #fff;
                //     cursor: pointer;
                // }

                .menuList {
                    // border-bottom: 1px dashed #ccc;
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                    font-size: 14px;
                    overflow: hidden;

                    span {
                        display: block;
                        float: left;
                        width: 200px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .listInfo {
                        float: right;
                        color: #ccc;

                        label {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
</style>